<template>
  <div v-loading="isloading"  class="main-container" ref="container" @wheel="handelwheel($event)"><!--使用自定义指令-->
    <!--图片-->
      <ul class="pager" :style="{
        marginTop
      }" @transitionend="theTransitionend()">
        <li class="item" v-for="item in banners" :key="item.id">
          <conten :dataItem="item"/>
        </li>
      </ul>
      <!--图标-->
      <div v-show="index>=1" class="icon icon-up" @click="switchTo(index-1)">
        <icon classty="arrowup"/>
      </div>
      <div v-show="index<banners.length-1" class="icon icon-down" @click="switchTo(index+1)">
        <icon classty="arrowdown"/>
      </div>
      <!--指示器-->
      <ul class="indicato">
        <li :class="{active:i===index}" v-for="(item,i) in banners" @click="switchTo(i)" :key="item.id"></li>
      </ul>
  </div>
</template>

<script>
import icon from '@/components/Icon';
import conten from './content.vue';
import getData from '@/Api';
import fetchdata from '@/mixins/loadingdata.js';
export default {
  mixins:[fetchdata([])],
  components:{
    icon,
    conten,
  },
  data(){
    return{
      index:0,//当前是第几个
      containerHeight:0,//容器高度
      wheelchangeimg:false,//是否正在变化
    }
  },
  mounted(){
    this.containerHeight=this.$refs.container.clientHeight;//获取元素高度
    window.addEventListener("resize",this.sizechange);//监听页面尺寸改变事件
  },
  destroyed(){
    window.removeEventListener("resize",this.sizechange);//组件销毁时注销监听事件
  },
  methods:{
   async fetchdata(){//组件混入的获取数据函数
     return await getData('/api/banner');
    },
    switchTo(i){
      this.index=i;
    },
    handelwheel(e){
      if(this.wheelchangeimg){
        return;
      }
      if(e.deltaY>5&&this.index<this.banners.length-1){
        this.wheelchangeimg=true;
        this.index++;
      }else if(e.deltaY<-5&&this.index>0){
        this.wheelchangeimg=true;
        this.index--;
      }
    },
    theTransitionend(){
      this.wheelchangeimg=false;
    },
    sizechange(){
      this.containerHeight=this.$refs.container.clientHeight;//获取元素高度
    }
  },
  computed:{
    marginTop(){
      return -this.index*this.containerHeight+'px';
    },
   
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/min.less';
@import '~@/style/var.less';
.main-container{
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: @dark;
  color: #fff;
  overflow: hidden;//bfc
  .pager{
    width: 100%;
    height: 100%;
    transition: 500ms;
    li{
      width: 100%;
      height: 100%;
    }
  }
  .indicato{
    .center();
    transform: translateY(-50%);
    left: auto;
    right: 20px;
    li{
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: @dark;
      border: 1px solid #fff;
      list-style: none;
      cursor: pointer;
      margin: 5px;
      &.active{
        background-color: #fff
      }
    }
  }
   .icon{
    .center();
    color: @gray;
    
    cursor: pointer;
    transform: translateX(-50%);
    .iconfont{
      font-size: 30px;
    }
    &.icon-up{
      top:25px;
      animation: icon-up  2s infinite;
    }
    &.icon-down{
      top: auto;
      bottom: 25px;
      animation: icon-down  2s infinite;
    }
   }
}
@size:15px;
@keyframes icon-up{
  0%{
    transform: translate(-50%,@size);
  }
  50%{
    transform: translate(-50%,-@size);
  }
  100%{
    transform: translate(-50%,@size);
  }
}
@keyframes icon-down{
  0%{
    transform: translate(-50%,-@size);
  }
  50%{
    transform: translate(-50%,@size);
  }
  100%{
    transform: translate(-50%,-@size);
  }
}
</style>